<template>
  <div>
    <a-affix :offset-top="0.1">
      <a-menu v-model:selectedKeys="current" mode="horizontal" @click="menuChage">
        <a-menu-item key="dashboard">
          <template #icon>
            <iconpark-icon name="dashboard"></iconpark-icon>
          </template>
          数据详情
        </a-menu-item>
        <a-menu-item key="work">
          <template #icon>
            <iconpark-icon name="work"></iconpark-icon>
          </template>
          工作
        </a-menu-item>
        <a-menu-item key="admin">
          <template #icon>
            <iconpark-icon name="admin"></iconpark-icon>
          </template>
          管理
        </a-menu-item>
      </a-menu>
    </a-affix>

    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { defineComponent, getCurrentInstance, onMounted, onUpdated, ref } from "vue";
export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    const current = ref(["dashboard"]);
    function menuChage({ key }) {
      proxy.$router.push({ name: key });
      localStorage.setItem("lifeMenu", key);
    }
    function routerRedirect() {
      const lifeMenu = localStorage.getItem("lifeMenu");
      if (lifeMenu != null) {
        current.value[0] = lifeMenu;
        if (lifeMenu.indexOf("admin") === -1) {
          proxy.$router.push({ name: lifeMenu });
        }
      } else {
        proxy.$router.push({ name: "dashboard" });
      }
    }
    onMounted(() => {
      routerRedirect();
    });
    onUpdated(() => {
      current.value[0] = localStorage.getItem("lifeMenu");
    });

    return {
      current,
      menuChage,
    };
  },
  components: {},
});
</script>
